<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        .video {
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        .play {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 50px;
            height: 50px;
        }

        video {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }

        .footer {
            z-index: 10;
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 60px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
        }

        .footer img {
            width: 30px;
            height: 30px;
            margin: 0 15px;
        }

        .footer .time {
            min-width: fit-content;
            max-width: fit-content;
            color: #fff;
            font-size: 12px;
            margin-left: 13px;
            margin-right: 15px;
        }

        .footer .full {
            width: 40px;
            height: 40px;
            margin: 0 8px;
        }

        .progress-box {
            position: relative;
            flex-grow: 1;
            height: 4px;
            background: rgba(0, 0, 0, 0.48);
            border-radius: 2px;
            overflow: initial;
        }

        .progress {
            background-color: #fff;
            border-radius: 2px;
            width: 0%;
            height: 4px;
        }

        .point {
            position: absolute;
            top: 2px;
            left: 0%;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.35);
            box-sizing: content-box;
            transform: translate(-50%, -50%);
        }

        .point::before {
            content: ' ';
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #fff;
        }

        #header {
            z-index: 999;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 44px;
            box-sizing: content-box;
            background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.83) 100%);
        }

        .back {
            width: 44px;
            height: 44px;
        }

        .back img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .title {
            font-size: 18px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .video-tips {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            font-size: 16px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }

        .cover {
            z-index: 20;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: transparent;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <header id="header" v-show="isShow" data-flex="cross:center">
            <div class="back" @click="rotateY">
                <img src="../../image/ui/back.png" alt="">
            </div>
            <div class="title" data-flex-box="1">
                {{ video.name }}
            </div>
        </header>
        <div class="video">
            <video id="video" preload="meta" x5-playsinline="" playsinline=""
                webkit-playsinline="" :src="video.videoUrl" :poster="video.pic || video.videoUrl + '?x-oss-process=video/snapshot,t_100,m_fast'" @click="isShow = !isShow">
                <source :src="video.videoUrl" type="video/mp4" />
                <source :src="video.videoUrl" type="video/ogg" />
                <source :src="video.videoUrl" type="video/webm" />
            </video>
            <img class="play" @click="isPlay = true" v-show="isPlay === false && isEnd === false" src="../../image/ui/play.png" alt="">
            <div class="footer" v-show="isShow" data-flex="box:justify cross:center">
                <img @click="isPlay = !isPlay"
                    :src="isPlay ? '../../image/ui/pause.png' : '../../image/ui/play_4.png'" alt="">
                <div class="progress-box">
                    <div :style="'width:'+ (currentTime/duration*100) +'%'" class="progress"></div>
                    <div :style="'left:'+ (currentTime/duration*100) +'%'" class="point" id="point"></div>
                </div>
                <div class="time">{{ current }}/{{ durations }}</div>
            </div>
            <div class="video-tips" v-show="isEnd" data-flex="main:center cross:center">
                您的试看已结束,请在下方进行购买
            </div>
            <div class="cover" v-show="isEnd"></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, pageParam, video, connectionType;
    var isTouch = false;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        // 安卓点击返回键
        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            rotateY();
        });
        api.addEventListener({
            name:'online'
        }, function(ret, err){
            vm.connectionType = ret.connectionType;
            notWifi();
        });
        fnInit();
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                // 传过来的视频数据
                video: pageParam.video || {},
                // 视频播放进度
                currentTime: 0,
                // 视频总时长
                duration: 0,
                // 是否播放
                isPlay: false,
                // 是否显示控制台,默认为是
                isShow: true,
                // 试看是否结束,默认为否
                isEnd: false,
                // 是否许可非WiFi播放
                isLicence: false,
                connectionType: api.connectionType
            },
            watch: {
                isPlay: function() {
                    if (this.isPlay) {
                        video.play();
                        setTimeout(function() {
                            notWifi();
                        }, 0)
                    } else {
                        video.pause();
                    }
                },
                currentTime: function () {
                    if (pageParam.point == 1 || pageParam.active == 1 || this.video.active == 1) {
                        return;
                    } 
                    if (this.currentTime >= this.video.tryLengthTime) {
                        this.isEnd = true;
                        this.isPlay = false;
                        this.isShow = true;
                    }
                }
            },
            computed: {
                current: function () {
                    time = parseInt(this.currentTime);
                    var s = time % 60,
                        m = (time - s) / 60;
                    return (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
                },
                durations: function () {
                    time = parseInt(this.duration);
                    var s = time % 60,
                        m = (time - s) / 60;
                    return (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
                }
            },
            mounted: function() {
                this.$nextTick(function() {
                    setTimeout(function() {
                        fnAddSliderEvent();
                    }, 1000)
                })
            }
        });
        videoListener();
    }

    function notWifi() {
        if(vm.isPlay && vm.connectionType !== 'wifi' && !vm.isLicence) {
            vm.isPlay = false;
            vm.isLicence = false;
            fnOpenAlert({
                alertType: '23',
                alertConfirmFn: 'noWifiConfirmPlay'
            })
        }
    }

    // 非wifi环境确认播放·
    function noWifiConfirmPlay() {
        vm.isPlay = true;
        vm.isLicence = true;
    }

    // 获取到视频的数据之后, 注入事件监听
    function videoListener() {
        video = document.getElementById('video');
        if(api.systemType === 'ios') {
            video.addEventListener('canplay', function() {
                video.currentTime = pageParam.currentTime;
            });
        } else {
            video.currentTime = pageParam.currentTime;
            vm.isPlay = pageParam.isPlay;
        }
        
        video.addEventListener('durationchange', function () {
            vm.duration = this.duration;
        })
        video.addEventListener('timeupdate', function () {
            if(!isTouch) {
                vm.currentTime = this.currentTime;
            }
        });
        video.addEventListener("ended", function () {
            vm.isPlay = false;
        });
        if(api.systemType === 'ios') {
            vm.isPlay = pageParam.isPlay;
        }
    }

    // 竖屏
    function rotateY() {
        api.execScript({
            name: pageParam.winName,
            frameName: pageParam.frmName,
            script: 'resumePlay(' + vm.currentTime + ',' + vm.isPlay + ');'
        })
        api.closeWin();
        api.setScreenOrientation({
            orientation: 'portrait_up'
        });
    }

    function fnAddSliderEvent() {
    var startX;
    var startY;
    var currentX;
    var currentY;
    var progressWidth = document.getElementsByClassName('progress-box')[0].clientWidth;
    var point = document.getElementsByClassName('point')[0];
    point.addEventListener('touchstart', function(event) {
        startX = event.touches[0].clientX;
        startY = event.touches[0].clientY;
        isTouch = true;
    })

    point.addEventListener('touchmove', function(event) {
        var progressBox = document.getElementsByClassName('progress-box')[0];
        // 防止拖动超出进度条
        if (event.touches[0].clientX >= progressBox.offsetLeft && event.touches[0].clientX <= progressBox.offsetLeft + progressWidth - 6) {
            currentX = event.touches[0].clientX;
        }
        currentY = event.touches[0].clientY;
        var distance = currentX - startX;
        startX = currentX;
        if (distance) {
            var time = vm.duration * (distance / progressWidth);
            vm.currentTime = vm.currentTime + time;
            video.currentTime = vm.currentTime;
        }
    })

    point.addEventListener('touchend', function() {
        isTouch = false;
    })
}
</script>

</html>